import { MessageOutlined, UserOutlined } from "@ant-design/icons";
import { useState } from "react";
import style from "./index.module.css";
import { Avatar, Button, Input, Modal, Rate } from "antd";

interface CommentButtonProps {
  type: string;
  rate?: number;
  setRate?: (rete: number) => void;
  comment: string;
  setComment: (comment: string) => void;
  commentCount?: number;
  addComment?: (content: string) => Promise<void>;
  currentUser?: {
    username: string;
    avatar?: string;
  };
}

export default function CommentButton({
  type,
  rate,
  setRate,
  comment,
  setComment,
  commentCount = 0,
  addComment,
  currentUser,
}: CommentButtonProps) {
  const [visible, setVisible] = useState(false);
  const [submitting, setSubmitting] = useState(false);

  const handleClick = () => {
    setVisible(true);
  };

  async function handleSubmit() {
    setSubmitting(true);
    try {
      if (addComment) {
        await addComment(comment);
        setVisible(false);
      }
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <>
      <div className={style.commentButtonContainer} onClick={handleClick}>
        <div className={style.commentButton}>
          <MessageOutlined className={style.commentIcon} />
        </div>
        {commentCount > 0 && (
          <div className={style.commentCount}>
            {commentCount > 99 ? "99+" : commentCount}
          </div>
        )}
      </div>

      <Modal
        title="发表评论"
        zIndex={1024}
        centered
        open={visible}
        onCancel={() => {
          setComment("");
          setVisible(false);
          if (setRate) {
            setRate(0);
          }
        }}
        footer={[
          <Button key="cancel" onClick={() => setVisible(false)}>
            取消
          </Button>,
          <Button
            key="submit"
            type="primary"
            loading={submitting}
            onClick={handleSubmit}
            disabled={!comment.trim()}
          >
            发表评论
          </Button>,
        ]}
        width={600}
        destroyOnClose
      >
        {currentUser?.avatar && (
          <div className={style.currentUser}>
            <section>
              <Avatar
                className={style.userAvatar}
                src={currentUser?.avatar}
                icon={<UserOutlined />}
                onError={() => {
                  return true;
                }}
              />
              <span className={style.username}>{currentUser.username}</span>
            </section>
            {type === "game" && setRate && (
              <section>
                评分：
                <Rate
                  allowHalf
                  defaultValue={0}
                  value={rate}
                  onChange={(value) => setRate(value)}
                />
              </section>
            )}
          </div>
        )}
        <Input.TextArea
          value={comment}
          onChange={(e) => setComment(e.target.value)}
          placeholder="请输入评论内容"
          rows={4}
          allowClear
          autoSize={{ minRows: 4, maxRows: 8 }}
          className={style.commentTextarea}
        />
      </Modal>
    </>
  );
}
